import {Component, EventEmitter, Input, OnDestroy, OnInit, Output} from "@angular/core";
import {SharedService} from "../shared-service";
import {CommService} from "../comm-service";
import {MyhttpService} from "../myhttp.service";

declare var $: any;
import * as e from "echarts";

@Component({
  template: `
    <div class="sjbsbsl comp" [style.width]="compw" [style.height]="comph" [style.top]="topv"
         [style.left]="leftv">
      <div class="content">
        <div class="title">
          <div class="title_text">{{comptitle}}</div>
        </div>
        <div class="body iecrollkf chromescrollkf">
          <div id="p2kdkcbmsID"></div>
        </div>
      </div>
    </div>
  `,
  styles: [
    ".sjbsbsl{position:absolute;background-color:#fff;border:5px solid #ccc; }",
    ".content{width: calc(100%);height: calc(100%);}",
    ".content>.title{position: relative;width: 100%;height: auto;padding: 10px; border-bottom: 1px solid #ccc; color: rgb(138 143 151);}",
    ".title>.title_text{height: 15px;line-height: 15px;font-size: 15px;  width: auto;border-left: 5px solid #1477F3;padding-left: 10px}",
    ".content>.body{position: relative;width: 100%;height: calc(100% - 24px);padding: 16.5px 10px;}",
    ".body>#p2kdkcbmsID{ width: 920px;height: 270px}",
  ]
})
export class ZhzsSjbsbslComponent implements OnInit, OnDestroy {
  compw: string = "0px";
  comph: string = "0px";
  topv: string = "0px";
  leftv: string = "0px";
  comptitle: string = "";

  frompage: string;
  s_kqbh: string = "";
  s_ksjhbh: string = "";

  chart: any;

  getdata(): void {
    if (!this.s_kqbh || !this.s_ksjhbh) {
      return
    }
    const url = "sjgz/zsymlsfw/tjzdhsjbsl";
    this.itservice.kwPtPost(url, {
      kqbh: this.s_kqbh,
      ksjhbh: this.s_ksjhbh,
    }).subscribe(resp => {
      this.commservice.handResponse("get", url, resp, (arg1, resp, arg2) => {
        if (arg1) {
          if (arg2) {
            if (resp) {
              const zdsjbslListv = resp.zdsjbslList ? resp.zdsjbslList : [];
              if (!zdsjbslListv.length) {
                return
              }
              const itemname = [], items_datas_sczd = [], items_datas_dzzd = [];
              let max: number = 0;
              zdsjbslListv.forEach((item) => {
                itemname.push(item.xzqhmc);
                items_datas_sczd.push(item.zdsl);
                items_datas_dzzd.push(item.sjbsl);
              });
              const alllxdata = items_datas_sczd.concat(items_datas_dzzd);
              max = Math.max.apply(null, alllxdata);
              max = max + Math.ceil(max / 10);
              this.initbar(itemname, items_datas_sczd, items_datas_dzzd);
            }

          } else {
            this.commservice.myswal("warning", resp, "", "ts", null);
          }
        } else {
          this.getdata();
        }
      });
    })
    /*const url = "sjgz/zsymlsfw/tjxjcshsbsl";
    this.itservice.kwPtPost(url, {
      kqbh: this.s_kqbh,
      ksjhbh: this.s_ksjhbh,
    }).subscribe(resp => {
      this.commservice.handResponse("get", url, resp, (arg1, resp, arg2) => {
        if (arg1) {
          if (arg2) {
            if (resp) {
              const tjjgList = resp.tjjgList;
              if (tjjgList && tjjgList.length) {
                const itemname = [], items_datas_kd = [], items_datas_bms = [], items_datas_sczd = [],
                  items_datas_dzzd = [];
                let max: number = 0;
                tjjgList.forEach((item) => {
                  itemname.push(item.xzqhmc);
                  items_datas_bms.push(item.bmssl);
                  items_datas_kd.push(item.kdsl);
                  items_datas_sczd.push(item.sczdsbsl);
                  items_datas_dzzd.push(item.dzbqsbsl);
                });
                const alllxdata = items_datas_bms.concat(items_datas_sczd).concat(items_datas_kd).concat(items_datas_dzzd);
                max = Math.max.apply(null, alllxdata);
                max = max + Math.ceil(max / 10);
                this.initbar(itemname, items_datas_kd, items_datas_bms, items_datas_sczd, items_datas_dzzd);
              }
            }

          } else {
            this.commservice.myswal("warning", resp, "", "ts", null);
          }
        } else {
          this.getdata();
        }
      });
    });*/
  }

  initbar(itemname: any, items_datas_sczd: any, items_datas_dzzd: any): void {
    const that = this;
    if (this.chart) {
      this.chart.clear();
    } else {
      this.chart = e.init(document.getElementById('p2kdkcbmsID') as HTMLDivElement);
    }
    const option = {
      tooltip: {
        show: true,
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
          type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      grid: {
        left: '2%',
        right: '0%',
        bottom: '10%',
        top: "15%",
        containLabel: true
      },
      legend: {
        left: "right",
        top: "top",
        itemWidth: 15,
        itemHeight: 15,
        itemGap: 25,
        icon: "rect",
        textStyle: {
          color: "#CFD4D9",
          fontSize: 18
        }
      },
      xAxis: [{
        type: 'category',
        data: itemname,
        axisLine: {
          lineStyle: {
            color: '#CFD4D9'
          }
        },
        axisLabel: {
          fontSize: 16,
          color: "rgb(138 143 151)",
          interval: 0,  // 强制显示所有
          rotate: 30
        },
        axisTick: {
          show: false,
          alignWithLabel: false,
        },
        //boundaryGap: false,
      }],
      // dataZoom: [
      //   {
      //     type: 'slider',
      //     xAxisIndex: 0,
      //     filterMode: 'empty',
      //     endValue: 16,
      //     show: false
      //   },
      //   {
      //     type: 'slider',
      //     yAxisIndex: 0,
      //     filterMode: 'empty',
      //     show: false
      //   },
      //   {
      //     type: 'inside',
      //     xAxisIndex: 0,
      //     filterMode: 'empty'
      //   },
      //   {
      //     type: 'inside',
      //     yAxisIndex: 0,
      //     filterMode: 'empty'
      //   }
      // ],
      yAxis: [{
        type: 'value',
        splitNumber: 5,
        axisLine: {
          lineStyle: {
            color: '#CFD4D9'
          }
        },
        axisLabel: {
          fontSize: 16,
          color: "rgb(138 143 151)",
        },
        splitLine: {
          lineStyle: {
            color: '#CFD4D9'
          }
        },
        axisTick: {
          show: false,
        }
      }],
      series: [
        //   {
        //   type: "bar",
        //   name: "考点",
        //   itemStyle: {
        //     color: "#FBD545",
        //   },
        //   label: {
        //     show: false,
        //     position: "top",
        //     fontSize: 18,
        //     color: "#ffffff"
        //   },
        //   //smooth: false, //  0.5 ,  如果是 number 0-1之间， 标识平滑度 越小表示越接近折线段，反之则反
        //   data: items_datas_kd,
        // }, {
        //   type: "bar",
        //   name: "保密室",
        //   itemStyle: {
        //     color: "#F73A94"
        //   },
        //   label: {
        //     show: false,
        //     position: "top",
        //     fontSize: 18,
        //     color: "#ffffff"
        //   },
        //   //smooth: false, //  0.5 ,  如果是 number 0-1之间， 标识平滑度 越小表示越接近折线段，反之则反
        //   data: items_datas_bms,
        // },
        {
          type: "bar",
          name: "终端",
          itemStyle: {
            color: "#F9DD82"
          },
          label: {
            show: false,
            position: "top",
            fontSize: 18,
            color: "#ffffff"
          },
          //smooth: false, //  0.5 ,  如果是 number 0-1之间， 标识平滑度 越小表示越接近折线段，反之则反
          data: items_datas_sczd,
        },
        {
          type: "bar",
          name: "试卷包",
          itemStyle: {
            color: "#FF9900"
          },
          label: {
            show: false,
            position: "top",
            fontSize: 18,
            color: "#ffffff"
          },
          //smooth: false, //  0.5 ,  如果是 number 0-1之间， 标识平滑度 越小表示越接近折线段，反之则反
          data: items_datas_dzzd,
        }]
    };
    this.chart.setOption(option);
  }

  /**
   * V轴实际值
   * @param v
   */
  // getYaxisShow(v) {
  //   let retstr: string = "";
  //   switch (v) {
  //     case 0:
  //       retstr = "0";
  //       break;
  //     case 300:
  //       retstr = "1";
  //       break;
  //     case 600:
  //       retstr = "50";
  //       break;
  //     case 900:
  //       retstr = "100";
  //       break;
  //     case 1200:
  //       retstr = "300";
  //       break;
  //     case 1500:
  //       retstr = "800";
  //       break;
  //     case 1800:
  //       retstr = "1500";
  //       break;
  //     case 2100:
  //       retstr = "2300";
  //       break;
  //     case 2400:
  //       retstr = "2400";
  //       break;
  //   }
  //   return retstr;
  // }
  /**
   *  显示数据， -- 真实数据映射
   * @param zsdataArr
   */
  formatData(arr: any): any {
    const newHashArray = [];
    for (let i = 0; i < arr.length; i++) {
      const obj = {};
      const temp = arr[i];
      if (arr[i] > 0 && arr[i] <= 1) {
        arr[i] = 0 + arr[i] * (300 / 1);
      } else if (arr[i] > 1 && arr[i] <= 50) {
        arr[i] = 300 + arr[i] * (300 / 50)
      } else if (arr[i] > 50 && arr[i] <= 100) {
        arr[i] = 600 + arr[i] * (300 / 100)
      } else if (arr[i] > 100 && arr[i] <= 300) {
        arr[i] = 900 + arr[i] * (300 / 300)
      } else if (arr[i] > 300 && arr[i] <= 800) {
        arr[i] = 1200 + arr[i] * (300 / 800)
      } else if (arr[i] > 800 && arr[i] <= 1500) {
        arr[i] = 1500 + arr[i] * (300 / 1500)
      } else if (arr[i] > 1500 && arr[i] <= 2300) {
        arr[i] = 1800 + arr[i] * (300 / 2300)
      }
      obj["value"] = arr[i]; // 转化控制高度的虚拟数据
      obj["formatV"] = temp; // 真实数据
      newHashArray.push(obj)
    }
    this.commservice.log("formatData", newHashArray);
    return newHashArray;
  }

  /**
   * 组件在 显示面板中的位置+ 大小
   */
  initcompPositionSize_ctrshow(): void {
    // 大小 位置
    this.compw = this.o.compw + "px";
    this.comph = this.o.comph + "px";
    this.topv = this.o.topv + "px";
    this.leftv = this.o.leftv + "px";
    // 显示
    this.frompage = this.o.frompage;
    const lastsearchlx = this.o.paramchangelx;
    const compdata = this.o.paramchangedata;
    if (lastsearchlx === "pcompkqchange") {
      this.s_kqbh = compdata.kqbh;
      this.s_ksjhbh = compdata.ksjhbh;
      this.comptitle = `【${compdata.kqmc}】 终端、试卷包数量`;
      this.getdata();
    } else {
      this.s_kqbh = compdata.kqbh;
      this.s_ksjhbh = compdata.ksjhbh;
      this.comptitle = `【${compdata.kqmc}】 终端、试卷包数量`;
      this.getdata();
    }
  }

  @Input() o: any;
  @Output() outhander: EventEmitter<any> = new EventEmitter<any>();

  constructor(private commservice: CommService,
              private itservice: MyhttpService,
              private sharedService: SharedService) {
    this.sharedService.changeEmitted$.subscribe(resp => {
      const actiontype = resp.actiontype;
      const frompage = resp.frompage;
      const paramchangelx = resp.paramchangelx;
      const paramchangedata = resp.paramchangedata;
      switch (frompage) {
        case "zhzs": {
          if (paramchangelx === "pcompkqchange") {
            this.s_kqbh = paramchangedata.kqbh;
            this.s_ksjhbh = paramchangedata.ksjhbh;
            this.comptitle = `【${paramchangedata.kqmc}】 终端、试卷包数量`;
            this.getdata();
          }
        }
          break;
      }
    });
  }

  ngOnInit() {
    this.commservice.log("-- 【 compkey=sjbsbsl】--被父组件动态加载init....", this.o);
    this.initcompPositionSize_ctrshow();
  }

  ngOnDestroy() {

  }

}
